<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
.line_item {
	float: left;
	width: 26%;
	margin-left: 6px;
	padding-right: 6px;
	border-right: 1px #CCC dashed;
}

.li_boy {
	background-image: url(public/images/male.png);
	height: 28px;
	line-height: 28px;
	background-repeat: no-repeat;
	padding-left: 20px;
	list-style: none;
	background-position-y: center;
}

ul {
	margin: 8px;
	padding: 0px;
	list-style: none;
	overflow: hidden;
}

.li_girl, .li_dept_2 {
	background-image: url(public/images/female.png);
	height: 28px;
	line-height: 28px;
	background-repeat: no-repeat;
	padding-left: 20px;
	list-style: none;
	background-position-y: center;
}

.right2, .left3 {
	width: 35%;
	float: right;
	padding-right: 5px;
}
.tab2{
    border-top: 2px solid #CD3700;
    border-left: 1px solid #CD3700;
    border-right: 1px solid #CD3700;
    color: #CD3700;
}
.tab2_line, .tab4_line {
    border-top: 1px solid #CD3700;
}
.tab2{
    width: 100px;
    height: 24px;
    line-height: 24px;
    border-bottom: 2px solid white;
    position: relative;
    top: 2px;
    left: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    margin-top: 12px;
    background: white;
}
.tab1{
    border-top: 2px solid #008fb7;
    border-left: 1px solid #008fb7;
    border-right: 1px solid #008fb7;
    color: #008fb7;
}
.tab1{
    width: 100px;
    height: 24px;
    line-height: 24px;
    border-bottom: 2px solid white;
    position: relative;
    top: 2px;
    left: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    margin-top: 12px;
    background: white;
}
.tab1_line{
    border-top: 1px solid #008fb7;
}
</style>
<div class="easyui-layout" fit="true">
	<!--内容-->
	<div data-options="region:'center'" border="false">
		<h1>
			<a id="returnmark" href="#"> <img class="imglog"
				src="public/images/back.png" />&nbsp;<span>${cla.className }</span></a>
		</h1>
		<div class="div_normal">参加考试的班级与该班级的考生成绩</div>

		<fieldset class="fs">
			<legend>基本信息</legend>
			<div class="exam_info">【试卷名称】：${cla.className }_${workjd[0].work.name}</div>
			<div class="exam_info">
				【出卷人】： ${workjd[0].work.emp.name}
				<div class="exam_info">
					【有效时间】：
					<div class="exam_info" style="padding-left: 20px; height: 18px;">
						${cla.className }：${workjd[0].work.startTime} -
						${workjd[0].work.endTime}</div>

				</div>
			</div>
			<div class="exam_info">【选择题数】：${workjd[0].work.chooseCount}道题
				【判断题数】：${workjd[0].work.opinionCount}道题
				【判断题数】：${workjd[0].work.programCount}道题</div>
			<div class="exam_info">【学习阶段】： ${zj[0].dagang.name }</div>
			<div class="exam_info">
				【章节】：
				<c:forEach items="${zj}" var="z">
					《${z.name}》
				</c:forEach>
			</div>
			<div class="exam_info">【说明】：${empty workjd[0].work.remark ? '无' : workjd[0].work.remark}</div>
		</fieldset>
		<div class="charts_one">
			<div class="left2">
				 
				<div class="tab2">${cla.className}</div>
				<div class="tab2_line"></div>
		<ul>
			<c:forEach items="${stus}" var="s" varStatus="states">
				<c:choose>
					<c:when test="${workjd[states.index].state == '等待批改' }">
						<li class="${s.gender == '男' ? 'li_boy' : 'li_girl'} line_item"><span class="two"> <input
								type="hidden" value="${workjd[states.index].work.id}"> <a
								class="Mark" href="#">[阅卷]</a> <input type="hidden"
								value="${s.id}">
						</span> <span style="color: black;">${s.name}</span>
						<input type="hidden" id="workjdid" value="${workjd[states.index].id}">
						 <input type="hidden" value="${workjd[states.index].work.id}">
						 <a title="答题不会清除" class="redo" href="#">[重做]</a>
						 <input type="hidden" value=" ${cla.id}">
						 </li>
					</c:when>
					<c:when test="${workjd[states.index].state == '进行中' }">
						<li class="${s.gender == '男' ? 'li_boy' : 'li_girl'}   line_item"><span class="two"> <font>进行中</font>
						</span> <input type="hidden" value="${workjd[states.index].work.id}">
							<a class="seework" href="#" style="color: grey;">${s.name}</a> <input type="hidden"
							value="${s.id}"></li>
					</c:when>
					<c:when test="${workjd[states.index].state == '已批阅' }">
						<li class="${s.gender == '男' ? 'li_boy' : 'li_girl'}   line_item"><span class="two"> <font>
						<input type="hidden" value="${workjd[states.index].work.id}"/>
						<a class="zhongzuo">${workjd[states.index].allScore}</a>
						<input type="hidden" value="${s.id}">
						</font>
						</span> <input type="hidden" value="${workjd[states.index].work.id}">
							<a class="seemarkwork" href="#" style="color: grey;">${s.name}</a> <input
							type="hidden" value="${s.id}"></li>
					</c:when>
					<c:otherwise>
						<li class="${s.gender == '男' ? 'li_boy' : 'li_girl'}   line_item"><span class="two"><font
								color="red">未开始</font></span> <span style="color: black;">${s.name}</span></li>
					</c:otherwise>
				</c:choose>
			</c:forEach>
		</ul>
			</div>

			<div class="right2">
				<div class="tab1">成绩统计</div>
				<div class="tab1_line"></div>
				<div id="container" style="min-width:400px;height:298px"></div>
			</div>
			
		</div>
		<div class="clear"></div>
		<div>
	   		<div class="tab1">成绩分布</div>
			<div class="tab1_line"></div>
			<div id="a6" class="container" style="height: 290px"></div>
	   	</div>
	</div>
</div>
<script type="text/javascript" src="public/js/marking_homework.js"></script>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '<b>成绩等级分布</b>'
        },
        subtitle: {
            text: '班级考试成绩分布图'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '人次'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: '人数: <b>{point.y:.1f} 人</b>'
        },
        series: [{
            name: '总人数',
            data: [
                ['优秀', ${excellent.size()}],
                ['良好', ${good.size()}],
                ['中等', ${middle.size()}],
                ['差评', ${difference.size()}],
                ['不及格', ${fail.size()}],
                ['未评定', ${unassessed.size()}],
            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});
$(function(){
 	var data6={
	    title:'每月/日客服数',
	    xAxis:${stuname},
	    yAxis:[{
	    	name:'成绩',
	    	data:${scores}
	    	}]
	} 
    createCharts("a6",data6);
});
</script>
